<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <!--元标签-->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/nprogress.css">

    <style>
        #nprogress .bar {
            background-color: gold;
            height: 20px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .router-link-active {
            background-color: #f00;
        }

        /*首页自己的类名实现高亮*/
        .active {
            border: 1px solid gold;

        }

        .wrap {
            width: 100vw;
            height: 100vh;
            background-color: #cccc;
        }

        .wrap .header {
            width: 100vw;
            height: 20vh;
            background-color: #ddd;
            text-align: center;
        }

        .wrap .content {
            width: 100vw;
            height: 80vh;
            background-color: #999;
        }

        .wrap .content .left {
            float: left;
            width: 20vw;
            border-right: 10px solid #00ff00;
            height: 80vh;

        }

        .wrap .content .right {
            float: right;
            width: 80vw;
            height: 80vh;
            background-color: #fff;
        }

    </style>

</head>
<body>
<div id="hashapp">

    <router-view></router-view>

</div>

</body>

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="./lib/nprogress.js"></script>

<script type="text/javascript">
    const Login = {
        methods: {
            goDashboard() {
                // 调用登录的接口
                // 返回 token 令牌
                localStorage.setItem('authToken', 'Bearer asdfasdfasdfasdfasd123essa');

                this.$router.push('/admin');
            }
        },
        template: `
            <div>
                <h2>系统登录页面</h2>
                <form action="">
                <div>
                用户名：<input type="text">
                </div>
                <div>
                    密码：<input type="password" name="" id="">
                </div>
                <div>
                    <input type="submit" @click.prevent="goDashboard" value="登录">
                </div>
                </form>
            </div>
        `
    }


    const Dashboard = {
        methods: {
            logout() {
                this.$router.push('/login');
                localStorage.removeItem('authToken');
            }
        },
        template: `
            <div class="wrap">
                <div class="header">
                   <h2>后台首页</h2>
                   <button @click="logout">退出</button>

                </div>
                <div class="content">
                    <div class="left">
                        <ul>
                        <li><router-link to="/admin/order/list">订单列表</router-link></li>
                        <li><router-link to="/admin/manager/list">管理员列表</router-link></li>
                        <li><router-link to="/admin/member/list">会员列表</router-link></li>
                        </ul>
                    </div>
                    <div class="right">
                        <p>router-view 是 后台首页里面的子页面的路由的出口</p>

                        <router-view></router-view>
                    </div>
                </div>


            </div>
        `
    }

    const OrderList = {
        template: `
            <div>
                <h3>订单列表</h3>

            </div>
        `
    }

    const Manager = {
        template: `
            <div>
                <h3>Manager</h3>

            </div>
        `
    }

    const Member = {
        template: `
            <div>
                <h3>Member</h3>

            </div>
        `
    }


    const AdminIndex = {
        template: `
            <div>
                <h3>AdminIndex</h3>
                <p>首页的首页一般都是图表展示</p>
                <p>echarts</p>

                <p>
                https://preview.pro.antdv.com/dashboard/workplace
                </p>
                <p>后台的首页，必须是登录之后才可以访问的，如果没有登录，则不可以访问。则这个时候，我们可以使用 路由守卫进行检测操作，一般也叫做 导航守卫，有的人也叫做 中间件。</p>
                <p>
                https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

                </p>
            </div>
        `
    }


    const routes = [
            {
                path: '/',
                name: 'index',
                redirect: '/login',
                // 元信息：指的是描述信息的信息
                // 文件：1. 文件的信息（元信息）（文件的名称，文件的大小，文件的格式，文件的编码） +  文件的内容（文件里面我们写的东西）
                meta: {
                    title: '后台首页',
                    needAuth: true,
                }
            },
            {
                path: '/login',
                name: 'login',
                component: Login,
                meta: {
                    title: '登录页面',
                    needAuth: false,
                }
            },
            {
                path: '/admin',
                name: 'dashboard',
                component: Dashboard,
                meta: {
                    title: '后台首页',
                    needAuth: true,
                },
                /*后台首页默认展示的页面*/
                redirect: '/admin/index',
                children:
                    [
                        {
                            path: 'index',
                            name: 'index',
                            component: AdminIndex,
                            meta: {
                                title: '后台首页',
                                needAuth: true,
                            },
                        },
                        /*1.  children 定义的路由是 后台首页的子路由
                        * 2. 完整  path: 拿父路由（/admin） +  子路由（order/list）
                        * 3. 在父页面定义一个子页面显示的区域
                        * */
                        {
                            /*子路由不需要写  / */
                            path: 'order/list',
                            name: 'order-list',
                            component: OrderList,
                            meta: {
                                title: '订单列表',
                                needAuth: true,
                            },
                        },
                        {
                            path: 'manager/list',
                            name: 'manager',
                            component: Manager,
                            meta: {
                                title: '管理员列表',
                                needAuth: true,
                            },
                        },
                        {
                            path: 'member/list',
                            name: 'member',
                            component: Member,
                            meta: {
                                title: '会员列表',
                                needAuth: true,
                            },
                        }
                    ]
            }

        ]
    ;

    const router = new VueRouter({
        routes: routes,
        linkActiveClass: 'active',
    })

    /**
     * beforeEach 一般叫做前置路由守卫，在我们的路由请求达到后，会执行 参数函数。
     * 参数函数，有三个参数
     *  1. to 代表前往的路由
     *  2. from 代表来的位置
     *  3. next 放行器，如果调用 next()，则代表放行，如果不执行，则代表不放行，则无法达到 to 的页面
     *      3.1 next 可以接受path 作为参数前往指定的页面
     *
     */
    router.beforeEach(function (to, from, next) {
        NProgress.start();

        let {title, needAuth} = to.meta;
        // 更好地址栏的文字
        document.title = title;

        console.log(to, '前往的路由');
        console.log(from, '从哪里来的路由');

        // next 是否执行是有前提条件。
        //1.  如果用户访问的是需要登录后 才可以访问的页面，则我们需要检测一下用户登录凭证是否存在，如果存在，则放行，否则前往 登录页面
        // 2. 如果用户访问的页面是不需要登录的后才可以看到的，则可以直接放行。

        // 考虑：1. 哪些页面要登录后才可以看
        // 考虑：2. 如何去检测登录的凭证
        let token = localStorage.getItem('authToken');
        if (needAuth) {
            // 代表页面是需要登录后才可以访问
            if (token) {
                // 代表用户之前已经登录过系统
                next();
            } else {
                // 代表还没有登录，但是尝试访问一个需要登录后才可以看到的页面，则是不被允许的 直接给 next传递参数，重定向到 login 页面登录即可。
                next('/login');
            }

        } else {
            // 不需要登录就可以访问
            next();
        }

    })

    // 代表路由已经访问完毕，页面已经加载完了
    router.afterEach(function (to, from) {
        NProgress.done();

        /*
        * https://madewith.cn/23
        * */
        console.log(to, '后置路由守卫');
        console.log(from, '后置路由守卫');
    })

    new Vue({
        el: "#hashapp",
        data: {},
        router: router,
    });
</script>

</html>
